<li
  *ngFor="let child of lvMenuList"
  [ngStyle]="{
    display: child.hidden ? 'none' : '',
    width: _menu.lvPanelColumns && _menu.lvPanelColumns < lvMenuList.length && lvMenuLevel === 1 ? 100 / _menu.lvPanelColumns + '%' : ''
  }"
  [ngClass]="{ 'lv-menu-submenu-expanded': child.expanded }"
>
  <div *ngIf="child.type === 'group'" class="lv-group-item-title">
    <span>
      {{ child.label }}
    </span>
  </div>
  <ul
    *ngIf="child.type === 'group'"
    [@expandItem]="'visible'"
    lv-submenu
    [lvMenuList]="child.items"
    [lvCurrentId]="lvCurrentId"
    [lvCurrentHoverId]="lvCurrentHoverId"
    [ngClass]="'level' + lvMenuLevel"
    [lvMenuLevel]="lvMenuLevel"
  ></ul>

  <div
    *ngIf="child.type !== 'group'"
    class="lv-menu-item"
    [ngClass]="{
      'lv-menu-item-active': lvCurrentId === child.id,
      'lv-menu-item-parent-active': child._parentActive,
      'lv-menu-item-parent-hover': child._parentHover,
      'lv-menu-item-expanded': child.expanded,
      'lv-menu-item-activable': !child.items
    }"
    [ngStyle]="{
      display: child.hidden || (_menu.lvDirection === 'horizontal' && lvMenuLevel === 1 && child.label === '') ? 'none' : 'flex'
    }"
    (click)="itemClick($event, child)"
    (mouseenter)="setMouseEnterState($event, child, true)"
    (mouseleave)="setMouseEnterState($event, child, false)"
    [lv-tooltip]="child.tips"
    lvTooltipPosition="right"
    [attr.disabled]="child.disabled === '' || child.disabled ? '' : null"
  >
    <i *ngIf="child.icon" class="lv-menu-item-icon" [lvDisabled]="child.disabled" lv-icon="{{ child.icon }}"></i>
    <span [ngSwitch]="true" lv-overflow lvTooltipPosition="topLeft">
      <ng-container *ngSwitchCase="typeUtils.isTemplateRef(child.label)">
        <ng-container *ngTemplateOutlet="child.label; context: { $implicit: child }"></ng-container>
      </ng-container>
      <ng-container *ngSwitchCase="!typeUtils.isTemplateRef(child.label) && typeUtils.isTemplateRef(_menu.lvLabelTemplate)">
        <ng-container *ngTemplateOutlet="_menu.lvLabelTemplate; context: { $implicit: child }"></ng-container>
      </ng-container>
      <ng-container *ngSwitchDefault>{{ child.label }}</ng-container>
    </span>
    <lv-select-trigger-icon  *ngIf="_menu.lvDirection !== 'horizontal' && child.items && !_menu.lvCollapsed" [lvDisabled]="child.disabled" [lvOpen]="child.expanded"></lv-select-trigger-icon>
  </div>

  <ul
    *ngIf="
      (child.items && child.type !== 'group' && _menu.lvDirection === 'vertical' && !_menu.lvCollapsed) ||
      (child.items && child.type !== 'group' && _menu.lvDirection === 'horizontal' && lvMenuLevel === 1)
    "
    [@expandItem]="getExpandItemState(child)"
    lv-submenu
    [lvMenuList]="child.items"
    [lvCurrentId]="lvCurrentId"
    [lvCurrentHoverId]="lvCurrentHoverId"
    [ngClass]="'level' + (lvMenuLevel + 1)"
    [lvMenuLevel]="lvMenuLevel + 1"
  ></ul>

  <ng-template #templatePortal let-data let-level="level">
    <ul
      [@showItem]="_animationState"
      (@showItem.done)="onAnimationDone($event)"
      [ngClass]="{
        'lv-theme-dark': _menu.lvTheme === 'dark',
        'lv-left-menu-panel': true
      }"
      class="{{ _menu.lvPanelClass + ' level' + (lvMenuLevel + 1) }}"
      *ngIf="data.items && _menu.lvDirection === 'vertical'"
      lv-submenu
      [lvMenuList]="data.items"
      [lvCurrentId]="_menu.lvActiveItemId"
      [lvCurrentHoverId]="_menu.hoverItemId"
      [lvMenuLevel]="level + 1"
    ></ul>

    <ul
      [@slideMenu]="_animationState"
      (@slideMenu.done)="onAnimationDone($event)"
      [ngClass]="{
        'lv-theme-dark': _menu.lvTheme === 'dark',
        'lv-top-menu-panel': true,
        'lv-top-menu-panel-full': _menu.lvPanelColumns && _menu.lvPanelColumns < data.items.length && lvMenuLevel === 0
      }"
      class="{{ _menu.lvPanelClass + ' level' + (lvMenuLevel + 1) }}"
      *ngIf="data.items && _menu.lvDirection === 'horizontal'"
      lv-submenu
      [lvMenuList]="data.items"
      [lvCurrentId]="_menu.lvActiveItemId"
      [lvCurrentHoverId]="_menu.hoverItemId"
      [lvMenuLevel]="level + 1"
    ></ul>
  </ng-template>
</li>
